<template>
  <div class="fill-h" :class="xchartTitleClass">
    <span v-if="icon===true" class="xlabel-title-icon"></span>
    <template v-if="labelStyle==='title'">
      <span>{{title}}</span>
      <span class="label-value" :level="level">{{value}}</span>
      <span class="label-unit">{{unit}}</span>
    </template>
    <template v-if="labelStyle==='title1'">
      <span v-if="rightTitle!==''" class="xlabel-right">{{rightTitle}}</span>
      <span>{{title}}</span>
      <span class="label-value" :level="level">{{value}}</span>
      <span class="label-unit">{{unit}}</span>
    </template>
    <template v-if="labelStyle==='title2'">
      <div class="xchart-title2"><span>{{title}}</span></div>
    </template>
    <span v-if="trendShow===true" class="xtrend-icon" :type="item.labelOption.trend.type?item.labelOption.trend.type:''"></span>
    <template v-if="hasLabelButtons===true">
      <a v-for="button in item.labelOption.button" class="xchartbtn"
         :class="button.selected?'xselected':''"
         :key="button.key?button.key:''">{{button.name?button.name:""}}</a>
    </template>
  </div>
</template>

<script>
export default {
  name: "xLabelWrapper",
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
  },
  computed:{
    trend(){
      return this.item.labelOption.trend?this.item.labelOption.trend:"";
    },
    trendShow(){
      if(this.trend){
        return this.item.labelOption.trend.show?true:false;
      }
      return false;
    },
    labelStyle(){
      return this.item.labelStyle?(this.item.labelStyle.type?this.item.labelStyle.type:"title"):"title";
    },
    icon(){
      return this.item.icon?true:false;
    },
    xchartTitleClass(){
      let result = "xchart-title";
      switch (this.labelStyle){
        case "title":
          result="xchart-title";
          break;
        case "title1":
          result="xchart-title1";
          break;
        case "title2":
          result="";
          break;
      }
      return result;
    },
    title(){
      return this.item.labelOption.title?this.item.labelOption.title:"";
    },
    unit(){
      return this.item.labelOption.unit?this.item.labelOption.unit:"";
    },
    value(){
      return this.item.labelOption.value?this.item.labelOption.value:"";
    },
    level(){
      return this.item.labelOption.level?this.item.labelOption.level:"";
    },
    rightTitle(){
      return this.item.labelOption.rightTitle?this.item.labelOption.rightTitle:"";
    },
    hasLabelButtons(){
      return this.item.labelOption.button instanceof Array?true:false;
    }
  }
}
</script>

<style lang="css" scoped src="@/components/bigScreen/css/screen.main.css"></style>
<style scoped>

</style>
